<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>jdMenu 1.3.beta2</title>
		<script src="jquery-1.1.2.js" type="text/javascript"></script>
		<script src="jquery.bgiframe.js" type="text/javascript"></script>
		<script src="jquery.dimensions.js" type="text/javascript"></script>
		<script src="jquery.jdMenu.js" type="text/javascript"></script>
		<script type="text/javascript">
			// Initialization, you can leave this here or move this somewhere else
			$(function(){
				$('ul.jd_menu_vertical').jdMenu({
					onShow: loadMenu, 
					onHide: unloadMenu, 
					offset: 1, 
				//	onAnimate: onAnimate
				});
			});

			function onAnimate(show) {
				//$(this).fadeIn('slow').show();
				if (show) {
					$(this)
						.css('visibility', 'hidden').show()
							.css('width', $(this).innerWidth())
						.hide().css('visibility', 'visible')
					.fadeIn('normal');
				} else {
					$(this).fadeOut('fast');
				}
			}

			var MENU_COUNTER = 1;
			function loadMenu() {
//				if (this.id == 'dynamicMenu') {

					var data = {
						"items":[
							{
								"id":1, 
								"info":["Page Title(1)"]
							},
							{
								"id":2, 
								"info":["Page Title(2)"]
							},
							{
								"id":3, 
								"info":["Page Title(3)"],
								"children": 
									[
										{
											"id":4, 
											"info":["Page Title(4)"],
											"children": [
												{
													"id":5, 
													"info":["Page Title(5)"]
												}
											]
										}
									]								
							}
						]
					};
/*					
					for(item in data.items) {
						alert(data.items.length);
						alert(data.items[0].info[0]);
					}
*/
//					var data = json_load.js;

					$('> ul > li', this).remove();
			
					var ul = $('<ul></ul>');
//					var t = MENU_COUNTER + 10;
//					for( item in data ) {

//					writeLevel(data);

					for (i=0;  i < data.items.length; i++) {
						id 	 = data.items[i].id;
						name = data.items[i].info[0];
						$('> ul', this).append('<li><a href="#' + id + '">Item # ' + name + '</a></li>');
					}
//				}
			}

			function writeLevel(d) {

//				$('> ul > li', this).remove();
				var ul = $('<ul></ul>');

//alert(d.items.length);
//alert(d.items[0].id);

				for (i=0;  i < d.items.length; i++) {
					id 	 = d.items[i].id;
					name = d.items[i].info[0];

					$('> ul', this).append('<li><a href="#' + id + '">Item # ' + name + '</a></li>');
				}
			}

			function unloadMenu() {
				if (MENU_COUNTER >= 30) {
					MENU_COUNTER = 1;
				}
			}

			// We're passed a UL
			function onHideCheckMenu() {
				return !$(this).parent().is('.LOCKED');
			}

			// We're passed a LI
			function onClickMenu() {
				$(this).toggleClass('LOCKED');
				return true;
			}
		</script>
		<link rel="stylesheet" href="jdMenu.css" type="text/css" />
		<link rel="stylesheet" href="jdMenu.slate.css" type="text/css" />
		<style type="text/css">
			body {
				margin: 0px;
				padding: 25px;
				font-family: sans-serif;
				font-size: small;
			}
			h1 {
				font-family: sans-serif;
				color: #0068B8;
			}
			
			li.LOCKED {
				font-weight: bold;
			}
			body {
				margin: 0px;
				margin-left: 15px;
			}
		</style>
	</head>
<body>

		<p>A vertical menu</p>
		<ul class="jd_menu_vertical jd_menu_slate" >
		</ul>
		
		<!--
		<ul class="jd_menu_vertical jd_menu_slate">
			<li id="dynamicMenu">Dynamic Menu
				<ul>
				</ul>
			</li>

			<li>jQuery
				<ul>
					<li><a href="http://jquery.com" target="_blank">jQuery.com</a></li>
					<li><a href="http://docs.jquery.com">jQuery Docs</a></li>
					<li><a href="http://jquery.com/plugins/">jQuery Plugins</a></li>
					<li><a href="http://www.visualjquery.com">Visual Jquery</a></li>
				</ul>
			</li>
			<li>jd Sharp
				<ul style="width: 400px;">
					<li>AutoScroll Plugin for jQuery</li>
					<li>jdMenu Plugin for jQuery</li>
					<li>Sub sub
						<ul>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
							<li>Item 4</li>
							<li>Item 5</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		-->
	</div>
</body>
</html>
